<template>
    <view class="content">
        <view class="title">实名认证</view>
        <view class="sub-title">
            创建您的
            <text style="color: #00a1e9;">新房通账号</text>
        </view>
        
        <view style="margin-top: 20rpx;" >
            <view class="padding-tb-lg border1">
                <input type="text" v-model="name" placeholder="请输入姓名" placeholder-class="text-lg text-gray" />
            </view>
            <view class="padding-tb-lg border1">
                <input type="idcard" v-model="idcard" placeholder="请输入身份证号" placeholder-class="text-lg text-gray" />
            </view>
            <view class="padding-tb-lg border1">
                <view class="item-l">身份证照片上传</view>
                <view class="item-tip">请上传身份证（人像面）</view>
                <view @click="$screenshot('cardF',0.8,0.6)">
                    <image :src="f_img" class="idcard-img" v-if="f_img"></image>
                    <image src="../../static/image/up_photo.png" class="up-photo" v-else></image>
                </view>
                <view class="item-tip u-p-t-35">请上传身份证（国徽面）</view>
                <view @click="$screenshot('cardB',0.8,0.6)">
                    <image :src="b_img" class="idcard-img" v-if="b_img"></image>
                    <image src="../../static/image/up_photo.png" class="up-photo" v-else></image>
                </view>
            </view>
        </view>
        
        <view class="btn" @click="$noMultipleClicks(doSubmit)">创建账号并认证</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick:true,//连点
                name: '',
                idcard: '',
                f_img: '',
                f_imgId: '',
                b_img: '',
                b_imgId: '',
            };
        },
        onLoad(option) {
            var _this =this
            uni.$on('CARD', data => {
                _this.$upLoadPic(data.path).then(ret => {
                    console.log(ret)
                    if (data.fromWhere == "cardF"){
                        _this.f_img = ret.detail.image
                        _this.f_imgId = ret.detail.image_id
                    }
                    if (data.fromWhere == "cardB"){
                        _this.b_img = ret.detail.image
                        _this.b_imgId = ret.detail.image_id
                    }
                });
            })
        },
        methods: {
            doSubmit() {
                if (!this.name) {
                    this.$toast('请输入姓名！');
                    return false;
                }
                if (!this.idcard) {
                    this.$toast('请输入身份证号！');
                    return false;
                }
                if (!this.$testIdCard(this.idcard)) {
                    this.$toast('身份证号码格式不正确');
                    return false;
                }
                if (!this.f_imgId) {
                    this.$toast('请上传身份证（人像面）！');
                    return false;
                }
                if (!this.b_imgId) {
                    this.$toast('请上传身份证（国徽面）！');
                    return false;
                }
                
                this.$ajax('real_name', {
                    user_token: this.$getSync('userToken'),
                    user_name: this.name,//姓名
                    id_number: this.idcard,//身份证
                    front_img_id: this.f_imgId,//正面图id
                    back_img_id: this.b_imgId,//反面图id
                }).then(ret => {
                    if (ret.success == 1000) {
                        // uni.removeStorageSync('userToken')
                        this.$toast('提交成功，请等待审核！');
                        setTimeout(() => {
                            this.$sTo('/pages/tabbar/index')
                        }, 500)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    .item-l{
        font-size: 32rpx;
        padding-bottom: 15rpx;
    }
    .item-tip{
        font-size: 24rpx;
        color: #acacac;
        padding-bottom: 20rpx;
    }
    .up-photo{
        width: 168rpx;
        height: 168rpx;
    }
    .idcard-img{
        width: 285rpx;
        height: 168rpx;
    }
    
    .title{
        font-size: 50rpx;
        font-weight: bold;
    }
    .sub-title{
        font-size: 34rpx;
        color: #8b8a8a;
    }
    .border1 {
        border-bottom: 2rpx solid #eaebf0;
    }
    
    
    .btn {
        border-radius: 50rpx;
        height: 98rpx;
        line-height: 98rpx;
        text-align: center;
        font-size: 34rpx;
        background-color: #00a1e9;
        margin: 40rpx auto 0;
        color: #FFFFFF;
    }
    
    .content{
        padding: 20rpx 50rpx;
    }
    
    
    
</style>
